<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>KIT ADMIN</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/plugins/build/css/app.css" media="all">
</head>
<style>
    .user{
        background: #f2f2f2;
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 50px;
        border-top: 1px solid #e0e0e0;
        width: 100%;
        z-index: 100;
    }
    .user i{
        font-size: 22px;
        line-height: 50px;
        cursor: pointer;
    }
    .user img{
        margin-top: 12px;
    }
    .user .usericon{
        float: left;
        margin-left: 30px;
    }
    .user .loginOut{
        font-size: 20px;
        float: right;
        margin-right: 30px;
    }
    .layui-nav-tree{
        padding-bottom: 55px;
    }
    .userinfo{
        padding: 5px 0px;
        background: #f2f2f2;
        position: absolute;
        bottom: 50px;
        left: 0px;
        border: 1px solid #e0e0e0;
        width: 100%;
        z-index: 100;
        display: none;
    }
    .userinfo a{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        margin-left: 34px;
    }
    .userinfo i{
        position: absolute;
        bottom: -12px;
        left: 32px;
    }
    .usericon-defined{
        display: none;
        height: 24px;
        width: 24px;
    }
    .spreadall{
        float: right;
        font-size: 16px;
        margin: 10px 7px 0px 0px;
        color: #444;
    }
</style>
<body>
    <div class="layui-layout layui-layout-admin kit-layout-admin">
        <div class="layui-side layui-bg-gray kit-side">
            <div class="layui-side-scroll">
                <div class="kit-side-fold">
                    <img src="../plugins/build/img/logo.png" style="height: 30px;width: 30px;"/>
                    <i class="layui-icon spreadall" title="折叠所有">&#xe680;</i>
                </div>
                <ul class="layui-nav layui-nav-tree" lay-filter="kitNavbar" kit-navbar ></ul>
            </div>
            <div class="user">
                <i title="用户" class="layui-icon usericon usericon-default">&#xe619;</i>
                <img class="usericon usericon-defined" src="/plugins/build/img/logo.png"/>
                <i title="退出" class="layui-icon loginOut">&#xe64e;</i>
            </div>
            <div class="userinfo">
                <i class="layui-icon">&#xe625;</i>
                <a class="editAvatar" href="javascript:void(0);">上传头像</a>
                <a href="javascript:void(0);" onclick="changePassword();">修改密码</a>
            </div>
        </div>
        <div class="layui-body" id="container">
            <div style="padding: 15px;">主体内容加载中,请稍等...</div>
        </div>
    </div>
    <script src="/plugins/layui/layui.js"></script>
    <script src="/plugins/common.js"></script>
    <script>
        //登出url,上传头像url
        var loginOutUrl = SERVER_URL+"/sysUser/loginOut";
        var avatarUrl = SERVER_URL+"/sysUser/editAvatar";
        var passwordUrl = SERVER_URL+"/module/views/login/password.html";

        //修改密码
        function changePassword() {
            layer.open({
                type: 2,
                title: "修改密码",
                area: ['420px', '240px'],
                content: passwordUrl
            });
        }

        layui.config({
            base: '/plugins/init/'
        }).use(['app', 'message', 'jquery', 'upload'], function() {
            var $ = layui.jquery;
            var app = layui.app;
            var upload = layui.upload;
            app.set({
                type: 'iframe'
            }).init();

            layer.config({
                anim: 5
                ,offset: '100px'
                ,maxmin: true
                ,isOutAnim: false,
                shade: [0.5, '#eee']
            })

            //编辑头像
            upload.render({
                elem: '.editAvatar'
                ,url: avatarUrl
                ,accept: "images"
                ,acceptMime: 'image/jpg, image/png'
                ,field: "userAvatar"
                ,size: 1024
                ,done: function(res){
                    console.log("成功");
                }
                ,error: function(){
                    console.log("失败");
                }
            });

            //获取用户登录信息
            var userinfo = sessionStorage.getItem("userinfo");
            if(userinfo){
                userinfo = JSON.parse(userinfo);
                if(userinfo.userAvatar){
                    $(".usericon-default").hide();
                    $(".usericon-defined").attr("src", userinfo.userAvatar);
                    $(".usericon-defined").show();
                }
            }

            //登出
            $(".loginOut").click(function () {
                layer.confirm('确定退出当前用户？', {
                    title: '用户注销',
                    btn: ['确定','取消']
                }, function(){
                    layer.load(2, {time: 5*1000});
                    $.ajax({
                        type: 'POST',
                        url: loginOutUrl,
                        success: function (result) {
                            layer.closeAll();
                            if(result.code == 20000){
                                window.location.reload();
                            }else{
                                layer.msg(result.msg, {time: 1500});
                            }
                        }
                    });
                })
            })

            //用户信息
            $(".usericon").click(function (event) {
                event.stopPropagation();
                if($(".userinfo").is(":hidden")){
                    $(".userinfo").show();
                }else{
                    $(".userinfo").hide();
                }
            })

            //折叠所有
            $(".spreadall").click(function () {
                event.stopPropagation();
                $(".layui-nav-item").removeClass("layui-nav-itemed");
            })

            //点击屏幕其他地方隐藏
            $(document).click(function(){
                $(".userinfo").hide();
            });
        });
    </script>
</body>

</html>